<template>
  <el-row id="exrt">
    <el-form :inline="true">
      <el-form-item>
        <el-input v-model="facilitiesNoStr" size="small" placeholder="终端编号" style="vertical-align: top"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="streetLampTypeStr" size="small" placeholder="路灯类型" style="vertical-align: top"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="addressStr" size="small" placeholder="地址" style="vertical-align: top"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="powerUnitStr" size="small" placeholder="权属单位" style="vertical-align: top"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="faultDescriptionStr" size="small" placeholder="故障描述" style="vertical-align: top"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" size="small" style="line-height:14px;vertical-align: top;">查询
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="exportExcel" size="small" style="line-height:14px;vertical-align: top;">导出
        </el-button>
      </el-form-item>
      <!--<el-form-item>-->
        <!--<el-button type="danger" @click="batchDelete" :disabled="this.sels.length===0" style="line-height:14px;vertical-align: top;" size="small">批量删除</el-button>-->
      <!--</el-form-item>-->

    </el-form>
    <el-table :data="exceptionReportList" @selection-change="selsChange" v-loading="listLoading" border style="width: 100%; font-size: 12px;" row-class-name="tabRow" tooltipEffect="light">
      <el-table-column type="selection"></el-table-column>
      <el-table-column align="center" prop="facilitiesNo" label="终端编号"></el-table-column>
      <el-table-column align="center" prop="streetLampType" label="路灯类型"></el-table-column>
      <el-table-column align="center" prop="address" label="地址" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="lngLat" label="经纬度" width="100" show-overflow-tooltip>
        <template scope="scope">
          <div class="t_blue" @click="goMap(scope.row.lngLat,scope.row.address)">查看地图</div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="300" prop="imgUrl" label="图片" show-overflow-tooltip>
        <template scope="scope">
          <section>
            <span v-if="scope.row.imgUrl" class="showImg">
              <img class="img-size" :src="urlPrefix + scope.row.imgUrl" key="1" preview="1" preview-text=""/>
              <span>查看故障上报图片</span>
            </span>
            <span v-else>未上传图片</span>
          </section>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="deptName" label="部门名称" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="faultDescription" width="300" label="故障描述" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="name" label="报修人"></el-table-column>
      <el-table-column align="center" prop="phone" label="报修电话"></el-table-column>
      <el-table-column align="center" width="150" :formatter="createTimeStr" label="创建时间"></el-table-column>
      <el-table-column align="center" width="150" :formatter="dealTimeStr" label="处理时间"></el-table-column>
      <el-table-column align="center" prop="remark" width="150" label="故障备注信息"></el-table-column>
      <el-table-column align="center" prop="nickname" label="处理人"></el-table-column>
      <el-table-column align="center" prop="result" width="150" label="处理结果"></el-table-column>
      <el-table-column align="center" prop="fault" width="150" label="线路故障"></el-table-column>
      <el-table-column align="center" prop="dealwithRemark" width="150" label="处理描述"></el-table-column>
      <el-table-column align="center" prop="imgDealUrl" width="150" label="处理图片">
        <template scope="scope">
          <section>
            <span v-if="scope.row.imgDealUrl" class="showImg">
              <img class="img-size" :src="urlPrefix + scope.row.imgDealUrl" key="1" preview="1" preview-text=""/>
              <span>查看故障处理图片</span>
            </span>
            <span v-else>未上传图片</span>
          </section>
        </template>
      </el-table-column>
      <!--<el-table-column align="center" label="操作" width="150px;">-->
        <!--<template slot-scope="scope">-->
          <!--<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)" >删除</el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <el-col :span="24" class="toolbar" style="margin-top: 15px;" v-show="!listLoading">
      <el-pagination id="pagination" layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 30]"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
  </el-row>
</template>

<script type="text/ecmascript-6">
  import {resetBreads, sessionOut} from '../../smartlight/common/js/util.js'
  export default{
    data () {
      return {
        total: 2,
        page: 1,
        pageSize: 10,
        exceptionReportList: [],
        listLoading: false,
        loginType: '',
        facilitiesNoStr: '',
        streetLampTypeStr: '',
        addressStr: '',
        powerUnitStr: '',
        faultDescriptionStr: '',
        urlPrefix: '',
        sels: [], // 列表选中列
        user: {}
      }
    },
    methods: {
      type2Str (row) {
        if (row.type) {
          return '已处理'
        } else {
          return '未处理'
        }
      },
      //      时间格式化
      createTimeStr (row, column) {
        var d = new Date(row.createTime)
        var year = d.getFullYear()
        var month = d.getMonth() + 1
        if (month < 10) {
          month = '0' + month
        }
        var date = d.getDate()
        if (date < 10) {
          date = '0' + date
        }
        var hh = d.getHours()
        if (hh < 10) {
          hh = '0' + hh
        }
        var mm = d.getMinutes()
        if (mm < 10) {
          mm = '0' + mm
        }
        var ss = d.getSeconds()
        if (ss < 10) {
          ss = '0' + ss
        }
        return year + '-' + month + '-' + date + ' ' + hh + ':' + mm + ':' + ss
      },
      dealTimeStr (row, column) {
        if(!row.dealTime){return ''}
        var d = new Date(row.dealTime)
        var year = d.getFullYear()
        var month = d.getMonth() + 1
        if (month < 10) {
          month = '0' + month
        }
        var date = d.getDate()
        if (date < 10) {
          date = '0' + date
        }
        var hh = d.getHours()
        if (hh < 10) {
          hh = '0' + hh
        }
        var mm = d.getMinutes()
        if (mm < 10) {
          mm = '0' + mm
        }
        var ss = d.getSeconds()
        if (ss < 10) {
          ss = '0' + ss
        }
        return year + '-' + month + '-' + date + ' ' + hh + ':' + mm + ':' + ss
      },
      search () {
        this.page = 1
        this.initExceptionReportList()
      },
      // 【删除】按钮事件
      batchDelete () {
        var ids = []
        this.sels.map(item => {
          ids.push(item.id)
        })
        console.log(ids)
        this.deleteExceptionReport(ids)
      },
      selsChange: function (sels) { // 设置选中列----单仕瑞--2017年4月12日 13:44:41
        this.sels = sels
      },
      // 分页插件查询方法-条数
      handleSizeChange (val) {
        this.pageSize = val
        this.initExceptionReportList()
      },
      // 【删除】、【批量删除】执行方法
      deleteExceptionReport (id) {
        this.$confirm('确定删除记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          this.$http.post('/smartLight/web/exceptionReport/delById.htm', id + '|' + this.loginType).then(response => {
            var resBody = response.body
            if (resBody.isSuccess === 0) {
              this.$message({
                showClose: true,
                message: '删除成功',
                type: 'success'
              })
              this.page = 1
              this.initExceptionReportList()
            } else if (resBody.isSuccess === 2) {
              this.listLoading = false
              sessionOut(this) // session超时处理
            } else {
              this.$message({
                showClose: true,
                message: '删除失败',
                type: 'error'
              })
            }
          })
        }).catch(() => {
        })
      },
      // 分页插件查询方法-页数
      handleCurrentChange (val) {
        this.page = val
        this.currentPage = val
        this.initExceptionReportList()
      },
      initExceptionReportList () {
        this.listLoading = true
        var para = {
          pageNumber: this.page,
          pageSize: this.pageSize,
          facilitiesNo: this.facilitiesNoStr.trim(),
          streetLampType: this.streetLampTypeStr.trim(),
          address: this.addressStr.trim(),
          powerUnit: this.powerUnitStr.trim(),
          faultDescription: this.faultDescriptionStr.trim(),
          type: this.loginType,
          treamId: this.user.treamId,
          userId: this.user.userId,
          deptId: this.user.deptId
        }
        console.log(para)
        this.$http.post('/smartLight/web/exceptionReport/getFinshList.htm', para).then(response => {
          var resBody = response.body
          this.listLoading = false
          if (resBody.isSuccess === 0) {
            this.total = resBody.result.totalElements
            this.exceptionReportList = resBody.result.content
            console.log(resBody.result.content)
          } else if (resBody.isSuccess === 2) {
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      },
      goMap (lngLat, adress) {
        window.open('https://uri.amap.com/marker?position=' + lngLat)
      },
      exportExcel () {
        var para = {
          pageNumber: this.page,
          pageSize: this.pageSize,
          facilitiesNo: this.facilitiesNoStr.trim(),
          streetLampType: this.streetLampTypeStr.trim(),
          address: this.addressStr.trim(),
          powerUnit: this.powerUnitStr.trim(),
          faultDescription: this.faultDescriptionStr.trim(),
          type: this.loginType,
          treamId: this.user.treamId,
          userId: this.user.userId,
          deptId: this.user.deptId
        }
        this.$http.post('/smartLight/web/exceptionReport/exportExcle.htm', para).then(response => {
          var resBody = response.body
          console.log(resBody)
          if (resBody.isSuccess === 0) {
            location.href = 'https://www.huadulds.com/file/smartLight/' + resBody.result
          } else if (resBody.isSuccess === 2) {
            sessionOut(this) // session超时处理
          } else {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
          }
        })
      }
    },
    mounted () {
      var user = sessionStorage.getItem('user')
      resetBreads(this)
      if (user) {
        user = JSON.parse(user)
        this.user = user
        this.loginType = user.type
        this.initExceptionReportList()
        this.urlPrefix = sessionStorage.getItem('prefix')
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .t_blue{color: #20a0ff;cursor pointer}
  .is-light
    max-width: 600px;
  #exrt
    .cell
      padding-left: 0px !important
      padding-right 0px !important
      overflow: hidden !important
      text-overflow: ellipsis !important
      white-space: nowrap !important
      .el-checkbox {
        padding-left: 15px !important
      }
    .img-size2 {
      width 30px;
      height 25px;
    }
  .img-size{
    width 100%;
    display block;
  }
  .showImg{
    position relative;
    color #20a0ff
  }
  .showImg img{
    position absolute;
    left 0;
    top:0;
    width 100%;
    height 100%;
    opacity 0;
    cursor pointer;
  }
</style>
